<template>
	<view class="herProject-container">
		<view class="avator-container">
			<view class="publisher-avator">
				<view class="cu-avatar lg round"
					style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)"></view>
				<span>赵女士</span>
			</view>
		</view>
		<view class="projectItem-container">
			<view class="intro">TA发布的项目</view>
			<view class="project-item" v-for="(item,index) in 6" :key="index">
				<view class="project-top">
					<view class="project-name">
						项目名称
					</view>
					<!-- 定义了一个字体颜色的类，当需要使用这个字体颜色时，只需要在标签上添加这个类即可。font-gray -->
					<view class="project-money">
						正在报名中
					</view>
				</view>
				<view class="item-content">
					项目简介
				</view>
				<view class="tagsList">
					<view class="tags" v-for="item in tagList" :key="item.id">{{ item.name }}</view>
				</view>
			</view>
		</view>
		<view class="endPromt">
			<text>没有更多了</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tagList: [
				{
					id: 1,
					name: '本科'
				},
				{
					id: 2,
					name: '硕士'
				},
				{
					id: 3,
					name: '博士'
				},
			],
			};
		}
	}
</script>

<style lang="scss" scoped>
.endPromt{
	text-align: center;
	color: #D4D4D4;
	margin-top: 20rpx;
}
.font-gray{
	color: #9F9F9F !important;
}
.project-money{
	font-size: 14px;
	color: #0074D6;
}
.item-content{
	margin-top: 20rpx;
	margin-bottom: 20rpx;
}
.project-item{
	margin-top: 20rpx;
	padding-bottom: 30rpx;
	border-bottom: 1px solid #EDEDED;
}
.project-top {
	margin-bottom: 20rpx;
	display: flex;
	font-size: 18px;
	justify-content: space-between;
	align-items: center;

	span {
		font-size: 12px;
		font-weight: normal;
		margin-left: 5rpx;
	}
}

.tagsList {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 12px;

	.tags {
		color: #A8A8A8;
		background-color: #EDEDED;
		padding: 2px 5px;
		border-radius: 10rpx;
		margin-right: 10px;
	}
}
.projectItem-container{
	padding: 30rpx;
	.intro{
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
}
.publisher-avator span{
	margin-left: 30rpx;
	font-size: 18px;
}
.herProject-container{
	
}
.avator-container{
	color: #fff;
	padding: 40rpx;
	height: 200rpx;
	background-color: #4D4343;
	display: flex;
	align-items: center;
}
</style>
